<template>
  <div class="mod-gs">
    <div class="hd">
      空间信息
    </div>
    <div v-if="detail" class="bd">
      <div class="bd-title">
        所在空间：863孵化器
      </div>
      <table class="table">
        <tbody>
          <tr>
            <td>空间类型</td>
            <td></td>
          </tr>
          <tr>
            <td>当前状态</td>
            <td>{{ space.contractStatus }}</td>
          </tr>
          <tr>
            <td>入驻房号</td>
            <td>
              {{
                space.enterpriseIncubatorList &&
                  space.enterpriseIncubatorList[0].room
              }}
            </td>
          </tr>
          <tr>
            <td>入驻期限</td>
            <td>{{ space.contractStartExpiryDate }}</td>
          </tr>
          <tr>
            <td>面积</td>
            <td>{{ space.size }}</td>
          </tr>
          <tr>
            <td>单价</td>
            <td>{{ space.price }}</td>
          </tr>
          <tr>
            <td>月租金</td>
            <td>{{ space.monthRent }}</td>
          </tr>
          <tr>
            <td>房租欠费</td>
            <td>{{ space.rentArrears }}</td>
          </tr>
          <tr>
            <td>水费欠费</td>
            <td>{{ space.waterArrears }}</td>
          </tr>
          <tr>
            <td>电费欠费</td>
            <td>{{ space.electricityArrears }}</td>
          </tr>
          <tr>
            <td>合计欠费</td>
            <td>{{ space.totalArrears }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { computed } from "@vue/composition-api";

export default {
  props: {
    detail: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const space = computed(() => props.detail?.enterpriseIncubatorVO);
    return {
      space
    };
  }
};
</script>

<style scoped></style>
